<script setup>
import { onMounted } from 'vue'
// 引入three
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
// 引入gltf解析器（压缩过的模型要使用解析器！！！）
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
// 引入hdr加载器
// import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

onMounted(() => {
  // 初始化三维场景
  const scene = new THREE.Scene()
  scene.background = new THREE.Color('#ccc') // 设置粉色背景色

  // 初始化相机
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  )
  // 设置相机位置
  camera.position.set(-3.23, 2.98, 4.06)


  // 初始化渲染器
  const render = new THREE.WebGLRenderer({
    // 设置抗锯齿
    antialias: true
  })
  // 设置渲染器大小
  render.setSize(window.innerWidth, window.innerHeight)
  // 将渲染器放置到body页面中
  document.body.appendChild(render.domElement)


  // 初始化轨道控制器
  const controls = new OrbitControls(camera, render.domElement)
  // 开启阻尼效果
  controls.enableDamping = true
  // 设置阻尼系数
  controls.dampingFactor = 0.05
  // 限制垂直旋转角度
  controls.minPolarAngle = 0
  controls.maxPolarAngle = Math.PI / 2


  // 创建GLTF加载器对象
  const gltfLoader = new GLTFLoader()
  // 创建解析器对象
  const dracoLoader = new DRACOLoader()


  // 解析器位置（这个draco解析器的位置在每个three版本的examples/jsm/libs/draco，然后将draco整个文件夹复制粘贴到public）
  dracoLoader.setDecoderPath('./draco/')
  // 给加载器指定解析器
  gltfLoader.setDRACOLoader(dracoLoader)
  // 注意！！：默认是在public中找模型，写路径的时候不能再写public
  gltfLoader.load('./model/ferrari.glb', (gltf) => {
    // 返回的场景对象gltf.scene插入到threejs场景中
    console.log(gltf)
    scene.add(gltf.scene)
  })

  // 添加一个辅助网格地面
  const gridHelper = new THREE.GridHelper(30, 15)
  // 开启透明度
  gridHelper.material.transparent = true
  // 设置透明度
  gridHelper.material.opacity = 0.5
  scene.add(gridHelper)

  // 添加平行光
  const ligth1 = new THREE.DirectionalLight(0xffffff, 1)
  ligth1.position.set(0, 10, 0)
  const ligth2 = new THREE.DirectionalLight(0xffffff, 0.5)
  ligth2.position.set(10, 10, 0)
  const ligth3 = new THREE.DirectionalLight(0xffffff, 0.5)
  ligth3.position.set(-10, 10, 0)
  scene.add(ligth1, ligth2, ligth3)


  // 设置画布自适应屏幕大小
  window.addEventListener('resize', () => {
    // 重置渲染器输出画布canvas尺寸
    render.setSize(window.innerWidth, window.innerHeight)
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix()
  })


  // 创建渲染函数
  const animate = () => {
    // 请求动画帧
    requestAnimationFrame(animate)
    // 渲染
    render.render(scene, camera)
    controls.update()
  }
  // 调用渲染函数
  animate()
})

</script>

<template>
  <div></div>
</template>

<style scoped></style>